import { defineStore } from 'pinia'
import { CanvasOperateType, Message } from '@renderer/types/message'
import { generateUUID } from '@renderer/utils/utils'
import dayjs from 'dayjs'
import { nextTick } from 'vue'

export const useMessageStore = defineStore('message', {
  state: () => ({
    activeTab: 'prompt' as 'prompt' | 'canvas' | 'simControler',

    prompt: [] as Message[],
    messageContentRef: null as HTMLElement | null,
    showNewMessage: false as boolean,

    canvasOperate: [] as CanvasOperateType[],
    canvasOperateContentRef: null as HTMLElement | null
  }),
  actions: {
    //切换tab
    changeTab(tab: 'prompt' | 'canvas' | 'simControler') {
      this.activeTab = tab
    },

    //添加信息
    addPrompt(message: Message) {
      const msg = {} as Message
      //设置id
      msg.id = generateUUID()
      //获取当前时间
      msg.time = dayjs().format('HH:mm:ss')

      msg.content = message.content
      msg.source = message.source
      msg.type = message.type

      //判断当前消息内容是否和上一条消息内容一样
      if (this.prompt.length > 0 && this.prompt[this.prompt.length - 1].content === msg.content) {
        //获取上一条消息的次数，如果没有就默认为1
        const count = this.prompt[this.prompt.length - 1].count || 1
        //设置当前消息的次数
        msg.count = count + 1
        //删除上一条消息
        this.prompt.pop()
      }

      //判断消息是否超过了200条
      if (this.prompt.length > 200) {
        //删除前一百条
        this.prompt.splice(0, 100)
      }
      this.prompt.push(msg)

      if (this.activeTab !== 'prompt') {
        this.showNewMessage = true
      }

      nextTick(() => {
        //将messageContentRef滚动条滚动到最后
        if (this.messageContentRef) {
          this.messageContentRef.scrollTop = this.messageContentRef.scrollHeight
        }
      })
    },

    //添加画布操作信息
    addCanvasOperate(message: CanvasOperateType) {
      const msg = {} as CanvasOperateType
      //设置id
      msg.id = generateUUID()
      //获取当前时间
      msg.time = dayjs().format('HH:mm:ss')

      msg.content = message.content
      msg.source = message.source
      msg.otherMsg = message.otherMsg

      this.judgeCanvasOperate(msg)
      nextTick(() => {
        //将canvasOperateContentRef滚动条滚动到最后
        if (this.canvasOperateContentRef) {
          this.canvasOperateContentRef.scrollTop = this.canvasOperateContentRef.scrollHeight
        }
      })
    },

    //对画布操作进行判断
    judgeCanvasOperate(msg: CanvasOperateType) {
      //判断当前消息内容是否和上一条消息内容一样
      if (
        this.canvasOperate.length > 0 &&
        this.canvasOperate[this.canvasOperate.length - 1].content === msg.content
      ) {
        //获取上一条消息的次数，如果没有就默认为1
        const count = this.canvasOperate[this.canvasOperate.length - 1].count || 1
        //设置当前消息的次数
        msg.count = count + 1
        //删除上一条消息
        this.canvasOperate.pop()
      }

      //判断消息是否超过了200条
      if (this.canvasOperate.length > 200) {
        this.canvasOperate.splice(0, 100)
      }

      this.canvasOperate.push(msg)
    },

    //清除消息
    clearMessage() {
      if (this.activeTab === 'prompt') {
        this.prompt = []
      } else {
        this.canvasOperate = []
      }
    }
  }
})
